<template>
  <div class="menu">
    <div class="menu_left">
      <div style="margin-right: 10px">
        <div class="slds-icon-waffle">
          <div class="slds-r1"></div>
          <div class="slds-r2"></div>
          <div class="slds-r3"></div>
          <div class="slds-r4"></div>
          <div class="slds-r5"></div>
          <div class="slds-r6"></div>
          <div class="slds-r7"></div>
          <div class="slds-r8"></div>
          <div class="slds-r9"></div>
        </div>
      </div>

      <div class="context_bar__item" v-for="(item, index) in permissionMenuList" :key="index" @click="toMenu(item, index)"
        :class="[item.path == toIndex ? 'active' : '']">
        {{ item.meta.title }}
      </div>
    </div>

    <div class="menu_right">
      <a-icon type="highlight" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mixin } from "@/utils/mixin.js";
import bus from "@/bus";
import { mapActions, mapState } from "vuex";
export default {
  mixins: [mixin],
  data() {
    return {
      current: "首页",
      MenuList: [
        {
          name: "首页",
          path: "/",
          children: [],
        },
        {
          name: "排放核算",
          children: [
            {
              name: "核算任务",
              icon: "icon-xiaoxi3",
              path: "/accounting/taskmanagement",
            },
            {
              name: "排放数据填报",
              icon: "icon-xiaoxi3",
              path: "/accounting/filltask",
            },

            {
              name: "核算数据审核",
              icon: "icon-shezhi2",
              path: "/accounting/taskreview",
            },
            {
              name: "核算汇总",
              icon: "icon-shezhi2",
              path: "/accounting/collect",
            },
          ],
        },
        {
          name: "排放报告",
          children: [
            {
              name: "新建核算报告",
              icon: "icon-xiaoxi3",
              path: "/report/newreports",
            },
            {
              name: "数据透视板",
              icon: "icon-xiaoxi1",
              path: "/report/datainsight",
            },

            {
              name: "数据管理",
              icon: "icon-shezhi2",
              path: "/report/internalaudit",
            },
            {
              name: "数据披露",
              icon: "icon-shezhi2",
              path: "/report/internalaudit",
            },
            {
              name: "报告模板管理",
              icon: "icon-shezhi2",
              path: "/report/template",
            },
          ],
        },
        {
          name: "排放核查",
          children: [
            {
              name: "第三方核查",
              icon: "icon-xiaoxi1",
              path: "/verification/thirdparty",
            },
            {
              name: "内部审查",
              icon: "icon-xiaoxi3",
              path: "/verification/internal",
            },
          ],
        },
        {
          name: "产品碳足迹",
        },
        {
          name: "碳资产管理",
          children: [
            {
              name: "碳资产总览",
              icon: "icon-xiaoxi1",
              path: "/assets/overview",
            },
            { name: "碳配额管理", icon: "icon-xiaoxi3", path: "/assets/quota" },
            { name: "资金管理", icon: "icon-xiaoxi3", path: "/assets/fund" },
            { name: "市场动态", icon: "icon-xiaoxi3", path: "/assets/market" },
            { name: "交易管理", icon: "icon-xiaoxi3", path: "/assets/market" },
          ],
        },
        {
          name: "零碳战略",
          children: [
            {
              name: "减排管理",
              icon: "icon-xiaoxi1",
              path: "/strategy/pathsandgoals",
            },
            {
              name: "清洁能源采购",
              icon: "icon-xiaoxi1",
              path: "/strategy/pathsandgoals",
            },
            {
              name: "碳消除",
              icon: "icon-xiaoxi3",
              path: "/strategy/emissionreduction",
            },
            {
              name: "价值链减排",
              icon: "icon-xiaoxi3",
              path: "/strategy/carbonfootprint",
            },
            {
              name: "科学碳目标",
              icon: "icon-xiaoxi3",
              path: "/strategy/carbonfootprint",
            },
            {
              name: "气候路径建模",
              icon: "icon-xiaoxi3",
              path: "/strategy/carbonfootprint",
            },
          ],
        },
        {
          name: "零碳课堂",
          children: [
            {
              name: "零碳课堂",
              icon: "icon-xiaoxi1",
              path: "/classroom/classroom",
            },
          ],
        },
        {
          name: "系统管理",
          children: [
            {
              name: "部门架构",
              icon: "icon-xiaoxi1",
              path: "/system/department",
            },
            { name: "系统用户", icon: "icon-xiaoxi1", path: "/system/user" },
            { name: "系统角色", icon: "icon-xiaoxi1", path: "/system/roles" },

            {
              name: "设施管理",
              icon: "icon-xiaoxi1",
              path: "/system/equipment",
            },

            // {
            //   name: "排放边界管理",
            //   icon: "icon-xiaoxi1",
            //   path: "/system/boundary",
            // },
            { name: "业务流程", icon: "icon-xiaoxi1", path: "/system/process" },
            { name: "菜单管理", icon: "icon-xiaoxi1", path: "/system/menu" },
            { name: "系统日志", icon: "icon-xiaoxi1", path: "/system/log" },
          ],
        },
      ],
    };
  },
  mounted() {
    this.current = Vue.ls.get("CURRENT_MENU");
  },

  computed: {
    // 防止刷新页面丢失
    toIndex() {
      return "/" + this.$route.path.split("/")[1];
    },
    ...mapState({
      // 主路由
      // mainRouters: (state) => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: (state) => {
        return state.user.permissionList;
      },
    }),
  },
  methods: {
    toMenu(val, index) {
      this.current = index;
      if (!val.children) {
        this.$router.push(val.redirect);
        return;
      }
      bus.$emit("childrenMenu", val);
      Vue.ls.set("CURRENT_MENU", { idx: index, val });
    },
  },
};
</script>

<style scoped lang="scss">
.menu {
  background: #fff;
  height: 37px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 6px solid #1b5f9e;

  .menu_left {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .slds-icon-waffle [class*="slds-r"] {
      width: 5px;
      height: 5px;
      background-color: rgb(116, 116, 116);
      display: inline-block;
      position: absolute;
      border-radius: 50%;
      transition: background-color 100ms;
      transform-origin: 50% 50%;
      will-change: scale, background-color;
    }

    .slds-icon-waffle {
      width: 30px;
      height: 30px;
      //   background: #ccc;
      position: relative;
      display: block;
      cursor: pointer;

      &:hover .slds-r1 {
        background-color: #418fde;
      }

      .slds-r1 {
        top: 0;
        left: 0;
        transition-delay: 200ms;
      }

      .slds-r2 {
        top: 0;
        left: 8px;
        transition-delay: 200ms;
      }

      .slds-r3 {
        top: 0px;
        left: 16px;
        transition-delay: 200ms;
      }

      .slds-r4 {
        top: 8px;
        left: 0px;
        transition-delay: 200ms;
      }

      .slds-r5 {
        top: 8px;
        left: 8px;
        transition-delay: 200ms;
      }

      .slds-r6 {
        top: 8px;
        left: 16px;
        transition-delay: 200ms;
      }

      .slds-r7 {
        top: 16px;
        left: 0px;
        transition-delay: 200ms;
      }

      .slds-r8 {
        top: 16px;
        left: 8px;
        transition-delay: 200ms;
      }

      .slds-r9 {
        top: 16px;
        left: 16px;
        transition-delay: 200ms;
      }
    }

    .context_bar__item {
      position: relative;

      &:before {
        position: absolute;
        height: auto;
        bottom: 0;
        content: "";
        left: 20px;
        right: 20px;
        top: 30px;
        background: transparent;
        //    transition: .2s
      }

      height: 37px;
      line-height: 37px;
      cursor: pointer;
      font-size: 14px;
      padding: 0 20px;

      &:hover {
        background: rgba(0, 112, 210, 0.1);
      }
    }

    .active {
      position: relative;

      background: rgba(0, 112, 210, 0.1);

      &:before {
        content: "";
        height: 3px;
        display: block;
        background: rgb(27, 150, 255);
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        transition: 0.1s;
      }
    }
  }
}
</style>